<template>
  <div class="tsgz-wrap">
    <dx-Wrap :name="'拦截态势'">
      <template v-slot:content>
        <div class="tsgz-row">
          <div class="tsgz-col two-item">
            <tsCol
                v-for="v in col1"
                :key="v.name"
                :detail="v"
            ></tsCol>
          </div>
          <div class="tsgz-col two-item">
            <tsCol
                v-for="v in col2"
                :key="v.name"
                :detail="v"
            ></tsCol>

          </div>
          <div class="tsgz-col two-item">
            <tsCol
                v-for="v in col3"
                :key="v.name"
                :detail="v"
            ></tsCol>
          </div>
        </div>
      </template>
    </dx-Wrap>
  </div>
</template>
<script>
import commonDialog from '@/components/commonDialog/common.dialog'
import commonForm from '@/components/commonForm/commonForm.component'
import commonWrap from '@/components/customComponents/commonWrap.component'
import tsCol from '@/components/left/tsCol'
import dxWrap from '@/components/customComponents/dxWrap.component'
import api from "@/api/common.api";
import _ from 'lodash'
import TWEEN from '@tweenjs/tween.js'
export default {
  components: {
    // commonDialog,
    // commonForm,
    // commonWrap,
    tsCol,
    dxWrap,
  },
  data() {
    return {
      dataTimer: null,
      col1: [
        {
          name: '涉诈url干预数',
          num: 368,
          icon: require('@/assets/img/HuaiNanImg/urlguanli.png'),
          unit: '次'
        },
        {
          name: '干预用户数',
          num: 50,
          icon: require('@/assets/img/HuaiNanImg/person.png'),
          unit: '次'
        },
        // {
        //   name: '累计用户数',
        //   num: 0,
        //   icon: require('@/assets/img/HuaiNanImg/person.png'),
        //   unit: '次'
        // },
      ],
      col2: [
        {
          name: '累计涉诈url',
          num: 950,
          icon: require('@/assets/img/HuaiNanImg/urlguanli.png'),
          unit: '次'
        },
        {
          name: '累计访问url',
          num: 2680,
          icon: require('@/assets/img/HuaiNanImg/person.png'),
          unit: '次'
        },
      ],
      col3: [
        {
          name: '本周累计干预数',
          num: 784,
          icon: require('@/assets/img/HuaiNanImg/urlguanli.png'),
          unit: '条'
        },
        {
          name: '本月累计干预数',
          num: 2437,
          icon: require('@/assets/img/HuaiNanImg/person.png'),
          unit: '条'
        },
      ]
    }
  },
  methods: {
    numChange(newValue, oldValue = 0) {
      new TWEEN.Tween({
        number: oldValue
      }).to({number: newValue.num}, 800).onUpdate(tween => {
        newValue.num = tween.number.toFixed(0)
      }).start()

      function animate() {
        if (TWEEN.update()) {
          requestAnimationFrame(animate);
        }
      }

      animate()
    },
    stiuationAwareStatic() {
      api.intercept_situaion().then(res => {

        for (var i in res.content) {

          if(res.content[i].data_name=='涉诈url干预数'){
            let t = _.find(this.col1, {name: '涉诈url干预数'})
            t.num = res.content[i].data_num
            this.numChange(t)
          }

          if(res.content[i].data_name=='干预用户数'){
            let t = _.find(this.col1, {name: '干预用户数'})
            t.num = res.content[i].data_num
            this.numChange(t)
          }

          if(res.content[i].data_name=='累计涉诈url'){
            let t = _.find(this.col2, {name: '累计涉诈url'})
            t.num = res.content[i].data_num
            this.numChange(t)
          }

          if(res.content[i].data_name=='累计访问url'){
            let t = _.find(this.col2, {name: '累计访问url'})
            t.num = res.content[i].data_num
            this.numChange(t)
          }

          if(res.content[i].data_name=='本周累计干预数'){
            let t = _.find(this.col3, {name: '本周累计干预数'})
            t.num = res.content[i].data_num
            this.numChange(t)
          }

          if(res.content[i].data_name=='本月累计干预数'){
            let t = _.find(this.col3, {name: '本月累计干预数'})
            t.num = res.content[i].data_num
            this.numChange(t)
          }

        }

   /*     let t = _.find(this.col1, {name: '当天涉诈url干预数'})

        t = _.find(this.col1, {name: '当前干预用户数'})
        t.num = res.blockUvCnt
        this.numChange(t)
        t = _.find(this.col1, {name: '当天累计用户数'})
        t.num = res.blockUvCntDay
        this.numChange(t)
        t = _.find(this.col2, {name: '累计涉诈url的干预次数'})
        t.num = res.blockCntDay
        this.numChange(t)

        t = _.find(this.col2, {name: '累计访问涉诈url次数'})
        t.num = res.pvCntDay
        this.numChange(t)

        t = _.find(this.col3, {name: '本周累计干预用户数'})
        t.num = res.blockUvCntWeek
        this.numChange(t)

        t = _.find(this.col3, {name: '本月累计干预用户数'})
        t.num = res.blockUvCntMonth
        this.numChange(t)*/

      })
    },
  },
  mounted() {
     this.stiuationAwareStatic()
  /*   this.dataTimer = setInterval(() => {
       this.stiuationAwareStatic()
     }, 1000 * 20)*/
  },
  destroyed() {
    clearInterval(this.dataTimer)
  }
}
</script>
<style lang="stylus">
  .tsgz-wrap {
    height: 100%;
    .tsgz-row {
      height: 100%;
      .tsgz-col {
        height: 33.33%;
        display: flex;
        justify-content: space-between
      }
      .two-item {
        justify-content: unset;
        .ts-item {
          width: 50%;
        }
      }
    }
  }
</style>
